import '@umijs/max';
import {Input, InputRef, Modal} from 'antd';
import React, {useCallback, useEffect, useRef} from 'react';
import {DoubleRightOutlined} from "@ant-design/icons";
import * as console from "console";
/**
 * 发布/订阅库
 * 因为搜索框的内容要与index.tsx中的搜索框内容同步，所以使用发布/订阅模式
 */
import PubSub from 'pubsub-js';
import {throttle} from 'lodash';

export type Props = {
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  visible: boolean;
};
const SearchModal: React.FC<Props> = (props) => {
  const {visible, onCancel} = props;
  const inputRef = useRef<InputRef>(null);
  useEffect(() => {
    // 跳转到指定 id 的标签
    if (visible) {
      const element = document.getElementById("最新ApiList");
      if (element) {
        //scrollIntoView 的 { behavior: "smooth" } 参数确保页面平滑滚动到目标元素。
        element.scrollIntoView({behavior: "smooth", block: "start"});
      }
    }
  }, [visible]);
  /**
   * useCallback缓存函数，在组件多次重新渲染的时候缓存函数
   */
  const handlePressEnter = useCallback(
    // 使用 lodash 的 throttle 进行节流处理
    throttle((e) => {
      console.log(e, inputRef?.current?.input?.value);
      // 发布消息
      PubSub.publish('searchText', inputRef?.current?.input?.value);
    }, 1000), []);

  return (
    <Modal
      width={600}
      title={
        <h3 style={{fontWeight: "bold", color: "#425AEF"}}>搜索</h3>
      }
      open={visible}
      onCancel={() => {
        onCancel?.()
      }}
      maskClosable={true}
      footer={false}
    >

      <Input
        ref={inputRef}
        onPressEnter={handlePressEnter}
        placeholder="输入关键词快速查找"/>
      <div style={{marginLeft: 6, color: "#4c4948", fontSize: 16, marginBottom: 10, marginTop: 12}}>
        <p> 快捷搜索:</p>
      </div>

      <h4 style={{marginLeft: 6, color: "rgba(60, 60, 67, 0.6)", fontWeight: 400}}><DoubleRightOutlined/>{"  "}Luke
        提供搜索服务 · 快捷搜索记得回车～</h4>
    </Modal>

  );
};
export default SearchModal;
